<template>
	<view class="class">
		<u-navbar :border-bottom="false" title="点名"></u-navbar>
		<view class="info acea-row row-column">
			<text>{{info.start_date}}</text>
			<text>{{info.timefrom}} - {{info.timeto}}</text>
			<text>{{info.banji_name}}</text>
		</view>
		<view class="container">
			<view class="title acea-row row-middle row-between">
				<view class="left">班级成员({{info.student.length}}人)</view>
				<!-- <view class="right" v-if="info.is_take == '0'" @click="checkAllHandle">{{isAllCheck?'全部未到':'全部到课'}}</view> -->
				<view class="right" v-if="info.is_take == '0'" @click="showPiLiang = true">批量设置</view>
			</view>
			<view class="type acea-row row-middle row-between">
				<view class="left">学员姓名</view>
				<view class="keshi">
					<text>扣除课时</text>
				</view>
				<view class="right acea-row row-middle row-between">
					<text>到课</text>
					<text>迟到</text>
					<text>请假</text>
					<text>未到</text>
				</view>
			</view>
			<view class="search">
				<u-search placeholder="搜索学员姓名" v-model="keyword" :show-action="false"></u-search>
			</view>
			<view class="list acea-row row-column" v-if="info.student.length != 0">
				<view v-for="(item,index) in info.student" :key="index" >
					<view class="item acea-row row-middle" v-if="(keyword!=''&&item.name.indexOf(keyword)==-1)?false:true">
						<!-- <image src="../../../static/images/noticeDetail-student-default.png" mode=""></image> -->
						<view class="content acea-row row-column">
							<text>{{item.name}}</text>
							<!-- <text>剩余课时：{{item.classTime}}</text> -->
						</view>
						<view class="keshi_input">
							<input type="number" :disabled="info.is_take == '0'?false:true" :value="item.keshi" @input="e=>keshiChange(index,e)"/>
						</view>
						<view class="checkboxList acea-row row-middle row-between">
							<view class="checkbox acea-row row-middle row-center" @click="checkboxHandle(index,1)" :class="item.class_status==1?'checkbox-active':''" :style="info.is_take == '1'||!common.getDate().checkDay(info.start_date)?'opacity: 0.6;':''">
								<u-icon v-if="true" name="checkbox-mark" color="#ffffff" size="26"></u-icon>
							</view>
							<view class="checkbox acea-row row-middle row-center" @click="checkboxHandle(index,2)" :class="item.class_status==2?'checkbox-active':''" :style="info.is_take == '1'||!common.getDate().checkDay(info.start_date)?'opacity: 0.6;':''">
								<u-icon v-if="true" name="checkbox-mark" color="#ffffff" size="26"></u-icon>
							</view>
							<view class="checkbox acea-row row-middle row-center" @click="checkboxHandle(index,3)" :class="item.class_status==3?'checkbox-active':''" :style="info.is_take == '1'||!common.getDate().checkDay(info.start_date)?'opacity: 0.6;':''">
								<u-icon v-if="true" name="checkbox-mark" color="#ffffff" size="26"></u-icon>
							</view>
							<view class="checkbox acea-row row-middle row-center" @click="checkboxHandle(index,4)" :class="item.class_status==4?'checkbox-active':''" :style="info.is_take == '1'||!common.getDate().checkDay(info.start_date)?'opacity: 0.6;':''">
								<u-icon v-if="true" name="checkbox-mark" color="#ffffff" size="26"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else :text="' '" mode="list" margin-top="32">
				<template #bottom>
					<view class="acea-row row-column row-middle" style="color: #c0c4cc;font-size: 26rpx;line-height: 36rpx;">
						<view>暂无可点名学员</view>
						<view>请确认班级学员课程是否有课时或者是否到期</view>
					</view>
				</template>
			</u-empty>
		</view>
		<view :style="'height: calc(152rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<view class="footer" ref="footer" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);box-sizing: content-box;'">
			<view class="btn" v-if="info.is_take == '0'">
				<view v-if="common.getDate().checkDay(info.start_date)" @click="submit">点名</view>
				<view>不在当日</view>
			</view>
			<view class="btn" v-else style="opacity: 0.6;">已点名</view>
		</view>
		<u-select v-model="showPiLiang" :list="piLiangList" @confirm="piliangConfirm"></u-select>
	</view>
</template>

<script>
	import request from '../../../api/request.js'
	import common from '../../../api/common.js'
	const app = getApp()
	export default {
		data(){
			return{
				common,
				id:'',
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				info:{
					timefrom:'',
					timeto:'',
					student:[]
				},
				keyword:'',
				isAllCheck:true,
				
				showPiLiang:false,
				piLiangList:[{value: 1,label: '到课'},{value: 2,label: '迟到'},{value: 3,label: '请假'},{value: 4,label: '未到'}]
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.getDianmingInfo()
		},
		methods:{
			getDianmingInfo(){
				let data = {
					id:this.id
				}
				request.go((e)=>{
					// class_status 1:到课|2:迟到|3:请假|4:未到
					// if(e.data.is_take == '0'){
					// 	for(let i of e.data.student){
					// 		i.class_status = 1
					// 	}
					// }
					for(let i of e.data.student){
						i._keshi = i.keshi
						if(i.class_status != 1&&i.class_status != 2){
							i.keshi = 0 
						}
					}
					this.info = e.data
				},'/Banji/getTakeNameInfo',data,'POST')
			},
			submit(){
				let data = {
					id:this.id,
					student:this.info.student
				}
				// console.log(data)
				uni.showModal({
					title:'确认点名？',
					success: function (res) {
						if (res.confirm) {
							// console.log(data)
							request.go((e)=>{
								uni.showToast({
									title:'点名成功',
									icon:'success',
									duration:600
								})
								setTimeout(()=>{
									uni.navigateBack({})
								},600)
							},'/Banji/addTakeName',data,'POST','application/json',1)
						} else if (res.cancel) {
						}
					}
				})
				
			},
			checkboxHandle(index,status){
				let item = this.info.student[index]
				if(this.info.is_take == '0'&&common.getDate().checkDay(this.info.start_date)){
					item.class_status = status
					this.setCheck()
					if(status == 1||status == 2){
						item.keshi = item._keshi
					}else{
						item.keshi = 0
					}
				}
			},
			keshiChange(index,e){
				// console.log(e)
				let item = this.info.student[index]
				item.keshi = e.target.value?e.target.value:0
			},
			piliangConfirm(e){
				// console.log('piliangConfirm',e)
				let class_status = e[0].value
				for(let i of this.info.student){
					i.class_status = class_status
					if(class_status==1||class_status==2){
						i.keshi = i._keshi
					}else{
						i.keshi = 0
					}
				}
			},
			checkAllHandle(){
				let isAllCheck = this.isAllCheck
				if(isAllCheck){
					for(let i of this.info.student){
						i.class_status = 4
						i.keshi = 0
					}
				}else{
					for(let i of this.info.student){
						i.class_status = 1
						i.keshi = i._keshi
					}
				}
				this.isAllCheck = !isAllCheck
			},
			setCheck(){
				let f = this.info.student.filter(e=>e.class_status == 1)
				if(f.length == 0){
					this.isAllCheck = false
				}else{
					this.isAllCheck = true
				}
			},
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .info{
		padding: 48rpx 0 48rpx 64rpx;
		background-color: #FFFFFF;
	}
	.class .info text{
		display: block;
	}
	.class .info text:nth-child(1){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
		margin-bottom: 16rpx;
	}
	.class .info text:nth-child(2){
		font-size: 46rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 600;
		color: #1f2329;
		line-height: 46rpx;
		margin-bottom: 48rpx;
	}
	.class .info text:nth-child(3){
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 36rpx;
	}
	.class .container{
		margin: 32rpx auto 0;
	}
	.class .container .title .left{
		margin-left: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .title .right{
		margin-right: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1661ff;
		line-height: 32rpx;
	}
	.class .container .type{
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: 26rpx auto 0;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;	
		line-height: 40rpx;
	}
	.class .container .type .right{
		width: 300rpx;
	}
	.class .container .type .right text{
		/* margin-right: 24rpx; */
	}
	.class .container .type .right text:last-of-type{
		/* margin-right: 0; */
	}
	.class .container .search{
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: 26rpx auto 0;
		padding: 16rpx;
	}
	.class .container .list{
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: 26rpx auto 0;
	}
	.class .container .list .item{
		width: 622rpx;
		padding: 32rpx 0;
		box-sizing: content-box;
		border-bottom: 2rpx solid #ebedf0;
		margin: auto;
	}
	.class .container .list .item:last-of-type{
		border-bottom: none;
	}
	.class .container .list .item image{
		display: block;
		width: 80rpx;
		height: 80rpx;
	}
	.class .container .list .item .content{
		/* margin-left: 32rpx; */
		flex: 1;
	}
	.class .container .list .item .content text{
		display: block;
	}
	.class .container .list .item .content text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .list .item .content text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.class .container .list .item .keshi_input input{
		width: 80rpx;
		margin-right: 75rpx;
		border: 1px solid #eee;
		text-align: center;
		border-radius: 16rpx;
	}
	.class .container .list .item .checkboxList{
		width: 277rpx;
		margin-right: 13rpx;
	}
	.class .container .list .item .checkbox{
		width: 42rpx;
		height: 42rpx;
		border: 2rpx solid #ebedf0;
		border-radius: 50%;
		/* margin-right: 54rpx; */
	}
	.class .container .list .item .checkbox:last-of-type{
		/* margin-right: 28rpx; */
	}
	.class .container .list .item .checkbox.checkbox-active{
		background: #1661ff;
		border: none !important;
	}
	.class .footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 999;
	}
	.class .footer .btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 24rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		z-index: 99;
		background-color: #1661FF;
	}
</style>
